<script>
import { defineComponent, reactive, ref, toRaw } from 'vue'
import { tagList } from '@Config/server/api'
import DataTable from '@Components/dataTable'
import { createPagination, Messages } from '@Config/config'
import { message, Modal } from 'ant-design-vue'
import MakeForm, { MakeFormState } from '@Components/makeForm'
import ColorBlock from '@Components/colorBlock'
import { useUrl, transform_pre_fn } from '@Hooks/url'
import { useRoute } from 'vue-router'

export default defineComponent({
  components: {
    DataTable,
    MakeForm,
    ColorBlock,
  },
  setup(props, context) {
    let form_config = [
      // {
      //   key: 'showType',
      //   initValue: 0,
      //   uiType: 'select',
      //   source: _SHOW_TYPE_LIST_FN(),
      //   col: { span: 6 },
      //   formItem: { label: '可见用户类型' },
      //   attr: { placeholder: '可见用户类型' },
      // },
      // {
      //   key: 'type',
      //   initValue: 0,
      //   uiType: 'select',
      //   source: TYPE_LIST(),
      //   col: { span: 6 },
      //   formItem: { label: '公告类型' },
      //   attr: { placeholder: '公告类型' },
      // },
      // {
      //   key: 'button',
      //   initValue: null,
      //   uiType: 'custom',
      //   col: { span: 5 },
      //   ui: (
      //     <a-space>
      //       <a-button
      //         type="primary"
      //         onClick={searchHandler}
      //         v-slots={{
      //           icon: () => {
      //             return <SearchOutlined />
      //           },
      //         }}
      //         loading={loading.search_loading}
      //       >
      //         搜索
      //       </a-button>
      //       <a-button
      //         type="primary"
      //         danger
      //         onClick={resetHandler}
      //         v-slots={{
      //           icon: () => {
      //             return <ClearOutlined />
      //           },
      //         }}
      //         loading={loading.search_loading}
      //       >
      //         重置
      //       </a-button>
      //     </a-space>
      //   ),
      // },
    ]
    let form_state = reactive({ data: MakeFormState(form_config) })

    //表格数据配置
    let tableData = reactive({
      data: {
        source: [],
        columns: [
          {
            key: 'id',
            dataIndex: 'id',
            title: 'ID',
          },
          {
            key: 'yyyyMmDd',
            dataIndex: 'yyyyMmDd',
            title: '记录时间',
          },
          {
            key: 'operation',
            dataIndex: 'operation',
            title: '操作',
            transform: (text, record, index) => {
              return (
                <a-space>
                  <a-button type="primary">查看详情</a-button>
                  <a-button type="primary" danger>
                    导出
                  </a-button>
                </a-space>
              )
            },
          },
        ],
      },
    })

    //表格loading状态
    let loading = reactive({ search_loading: false, delete_loading: false })

    let resetHandler = () => {
      form_ref.value.resetState()
      pagination.data.current = 1
      searchData()
    }
    //查询按钮监听
    let searchHandler = () => {
      pagination.data.current = 1
      searchData()
    }
    let route = useRoute()

    let { fromStateToQuery } = useUrl({
      fn: async () => {
        loading.search_loading = true
        let _params = {
          // ...form_state.data,
          index: pagination.data.current,
          size: pagination.data.pageSize,
        }
        let _result = await tagList(_params)
        if (_result.code != 0) {
          Messages.add(message.error('查询失败' + _result.msg))
          return
        }
        pagination.data.pageSize = _result.data?.size
        pagination.data.current = _result.data?.index
        pagination.data.total = _result.data?.total
        tableData.data.source = _result.data?.records
        loading.search_loading = false
      },
      formState: [
        // {
        //   key: 'showType',
        //   fn: (x) => {
        //     if (x) {
        //       return Number(x)
        //     } else {
        //       return 0
        //     }
        //   },
        // },
        // {
        //   key: 'type',
        //   fn: (x) => {
        //     if (x) {
        //       return Number(x)
        //     } else {
        //       return 0
        //     }
        //   },
        // },
      ],
    })
    //查询数据
    let searchData = async () => {
      fromStateToQuery({ path: route.path })
    }

    //表格分页
    let pagination = reactive({
      data: createPagination(searchData, true, false),
    })

    //分页点击
    // pagination.data.onChange = (pageNumber, pageSize) => {
    //   pagination.data.current = pageNumber
    //   pagination.data.pageSize = pageSize
    //   searchData()
    // }
    //ref dom
    let form_ref = ref(null)
    //新增公告回调函数

    //默认查询
    //searchData()

    return {
      tableData,
      loading,
      pagination,
      form_config,
      form_state,
      form_ref,
    }
  },
  render() {
    return (
      <a-row gutter={[20, 20]}>
        <a-col span={24}>
          {
            //   <MakeForm
            //   ref="form_ref"
            //   formConfig={this.form_config}
            //   value={this.form_state.data}
            // />
          }
        </a-col>

        <a-col span={24}>
          <DataTable
            data={this.tableData}
            loading={this.loading}
            uiAttr={{
              scroll: { x: null },
              tableLayout: 'fixed',
              bordered: true,
            }}
          ></DataTable>
          <a-affix {...this.pagination_affix_attr()}>
            <div class="affix">
              <a-pagination {...this.pagination.data} />
            </div>
          </a-affix>
        </a-col>
      </a-row>
    )
  },
})
</script>
